<template>
	<div class="wrapper">
	  <swiper :options="swiperOption" v-if="showSwiper">
	    <swiper-slide v-for="item of list" :key="item.id"  >
	    	<img class="swiper-img" :src="item.imgUrl" >
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div>  
</template>

<script>
export default {
	name: 'HomeSwiper',
	props: {
		list:Array
	},
	data () {
		return{
			swiperOption:{
				loop:true,
				autoplay: 3000,
				pagination: '.swiper-pagination',

			},
		}
	},
	computed:{
		showSwiper () {
			return this.list.length
		}
	}
}
</script>
<style lang="scss">
	.wrapper{
		.swiper-pagination-bullet-active{
			background: #fff;
		}
	}
</style>

<style lang="scss" scoped>
	.wrapper{
		overflow:hidden;
		width: 100%;
		height: 0;
		padding-bottom: 31.2%;
		background-color: $darkTextColor;
		.swiper-img{
			width: 100%;
			height: 100%;
		}
		
	}
	
</style>